<template>
  <div class="min-h-screen bg-white dark:bg-gray-900">
    <!-- 顶部栏 -->
    <header class="sticky top-0 z-10 bg-white/80 dark:bg-gray-900/80 backdrop-blur border-b border-gray-200 dark:border-gray-700">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
          <div class="flex items-center space-x-3">

            <h1 class="text-xl font-semibold text-gray-900 dark:text-white">MAESS 监控台</h1>
          </div>
          <div class="flex items-center space-x-4">
            <el-switch
              v-model="isDark"
              inline-prompt
              active-icon="Moon"
              inactive-icon="Sunny"
              @change="toggleDark()"
            />
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
      <slot />
    </main>
  </div>
</template>

<script setup>
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>